<script setup>
import {Location, Setting, User} from "@element-plus/icons-vue";
import axios from "axios";
import {onMounted, ref} from "vue";
import GoodsItem from "@/views/home/components/GoodsItem.vue";

const user = JSON.parse(sessionStorage.getItem("CurUser"))
// 获取收藏列表
const favoritesList = ref([])
const getFavoritesList = () => {
  if (user) {
    axios.get('api/favorite/list', {
      params: {
        userId: user.userId
      }
    }).then(res => {
      favoritesList.value = res.data.data;
    })
  }
}

onMounted(() => {
  getFavoritesList()
})
</script>

<template>
  <div class="home-overview">
    <!-- 用户信息 -->
    <div class="user-meta">
      <div class="avatar">
        <img src="@/assets/images/avatar.png" alt="" />
      </div>
      <h4>{{ user.userName }}</h4>
    </div>
    <div class="item">
      <router-link to="/user/info">
        <el-icon color="#333"><User /></el-icon>
        <p>信息管理</p>
      </router-link>

      <router-link to="/user/info">
        <el-icon color="#333"><Setting /></el-icon>
        <p>安全设置</p>
      </router-link>

      <router-link to="/addressManage">
        <el-icon color="#333"><Location /></el-icon>
        <p>地址管理</p>
      </router-link>
    </div>
  </div>
  <div class="goods-recommend">
    <div class="home-panel">
      <div class="header">
        <h4 data-v-bcb266e0="">我的收藏</h4>
      </div>
      <div class="main-container">
        <el-scrollbar height="400px">
          <div class="holder-container" v-if="favoritesList.length === 0">
            <el-empty description="暂无收藏数据" />
          </div>
          <div v-else class="favorites-list">
            <GoodsItem v-for="clothes in favoritesList" :clothes="clothes" :key="clothes.clNo"/>
          </div>
        </el-scrollbar>

      </div>

    </div>
  </div>
</template>

<style scoped>
.home-overview {
  background: #ffeaeb;
  height: 132px;
  display: flex;

  .user-meta {
    flex: 1;
    display: flex;
    align-items: center;

    .avatar {
      width: 85px;
      height: 85px;
      border-radius: 50%;
      overflow: hidden;
      margin-left: 60px;
      object-fit: contain;

      img {
        width: 100%;
        height: 100%;
      }
    }

    h4 {
      padding-left: 26px;
      font-size: 18px;
      font-weight: normal;
    }
  }

  .item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-around;

    &:first-child {
      border-right: 1px solid #f4f4f4;
    }

    a {
      color: white;
      font-size: 16px;
      text-align: center;

      .iconfont {
        font-size: 32px;
      }

      p {
        line-height: 32px;
        color: #333333;
      }
    }
  }
}
.goods-recommend {
  background-color: #fff;
  padding: 0 20px 20px;

  .home-panel {
    background-color: #fff;
    min-height: 400px;

    .header {
      height: 66px;
      border-bottom: 1px solid #f5f5f5;
      padding: 18px 0;
      display: flex;
      justify-content: space-between;
      align-items: baseline;

      h4 {
        font-size: 22px;
        font-weight: 400;
      }
    }

    .main-container {
      .holder-container {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .favorites-list {
        margin: 20px 0;
      }

      .pagination-container {
        justify-content: center;
        display: flex;
      }
    }
  }
}
</style>